<template>
    <el-table :data="tableData.record_list" stripe style="width: 100%;">
        <el-table-column prop="id" label="id" style="width: 5%;" />
        <el-table-column prop="userName" label="用户" style="width: 20%;" />
        <el-table-column prop="questionName" label="题目" style="width: 20%;" />
        <el-table-column prop="language" label="语言" style="width: 20%;" />

        <el-table-column #default="scope" label="状态" style="width: 20%;">

            <el-tag v-show="scope.row.title == 'Accept'" type="success" disabled plain>Accept</el-tag>
            <el-tag v-show="scope.row.title != 'Accept'" type="danger" disabled plain>{{ scope.row.title }}</el-tag>

        </el-table-column>

        <el-table-column prop="address" label="操作" style="width: 15%;" #default="scope">
            <el-button type="primary" link @click="showRecordDetial(scope.row)">查看详情</el-button>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="编译记录详情" width="50%">
        <el-descriptions :title="'No.' + recorddetial.qid" :column="3" border>
            <el-descriptions-item label="題目名" label-align="right" align="center" label-class-name="my-label"
                class-name="my-content" width="150px">{{ recorddetial.questionName }}</el-descriptions-item>
            <el-descriptions-item label="时间" label-align="right" align="center">{{ recorddetial.time }}
                ms</el-descriptions-item>
            <el-descriptions-item label="空间" label-align="right" align="center">{{ recorddetial.memory }}
                mb</el-descriptions-item>

            <el-descriptions-item label="状态" label-align="right" align="center">
                <el-tag v-show="recorddetial.title == 'Accept'" type="success" disabled plain>Accept</el-tag>
                <el-tag v-show="recorddetial.title != 'Accept'" type="danger" disabled plain>{{ recorddetial.title
                }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="语言" label-align="right" align="center">
                {{ recorddetial.language }}
            </el-descriptions-item>
            <el-descriptions-item label="提交日期" label-align="right" align="center">
                {{ recorddetial.submitTime }}
            </el-descriptions-item>
            <el-descriptions-item label="信息" label-align="right" align="center">
                <el-alert :title="recorddetial.message" :type="recorddetial.title == 'Accept' ? 'success' : 'error'"
                    :closable="false" />
            </el-descriptions-item>
        </el-descriptions>
        <br />
        <aceEditor :mode="'test'" :code="recorddetial.code" :testSample="recorddetial.testSample"
            :title="recorddetial.title" />
        <template #footer>
            <span class="dialog-footer">

            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import API from '@/plugins/axiosInstance';
import aceEditor from '@/components/front/aceEditor.vue';
import emitter from "@/lib/bus";
import { userStore } from '@/store/index'
import { reactive, onMounted, onUnmounted } from 'vue';
const props = defineProps(['records']);
console.log("ts")
const dialogVisible = ref(false)
const tableData = reactive({
    record_list: props.records
})
const recorddetial = ref({
    code: '',
    qid: 0,
    language: '',
    memory: 0,
    message: '',
    questionName: '',
    submitTime: '',
    testSample: '',
    time: 0,
    title: '',
    userName: '',
    uid: 0,
})

const showRecordDetial = (detial: any) => {
    console.log(detial);
    recorddetial.value = detial

    
    dialogVisible.value = true
}

</script>

<style scoped>
.my-label {
    background: var(--el-color-success-light-9);
}

.my-content {
    background: var(--el-color-danger-light-9);
}</style>